<template>
  <div class="home">
    <!-- <btn>
      <button>点击</button>
    </btn>
    <btn>
      <ul>
        <li v-for="i in 6" :key="i">{{i}}</li>
      </ul>
    </btn>
    <btn>编辑</btn>
    <btn>修改</btn> -->
    <!-- <btn>
      <template #default>
        <div>
            你是个麻瓜
        </div>
      </template>
    </btn> -->
    <!-- 
        template可以用来给插槽渲染一个模板 可以用v-slot指令 指定要将模板内容渲染进入哪一个插槽中
        v-slot 可以简写为一个#
       -->
    <!-- <btn>
      
      <template #header>
        <div>
          这是头部内容
        </div>
      </template>

      <template v-slot:aside>
        <div>
          这是侧边栏内容
        </div>
      </template>
    </btn> -->

    <!-- <btn>
      <template v-slot="{a, b, c}">
        <div>
            {{a}}
            <br>
            {{b}}
            <br>
            {{c.name}}
        </div>
      </template>
    </btn> -->
      <header>
        <button class="add">添加商品</button>
      </header>
      <div class="good-box">
          <table>
              <thead>
                  <tr>
                      <th>
                          <input type="checkbox" class="choseAll" id="checkAll">全选
                      </th>
                      <th>商品图片</th>
                      <th>
                          商品名称
                      </th>
                      <th>单价</th>
                      <th>数量</th>
                      <th>小计</th>
                      <th>操作</th>
                  </tr>
              </thead>
              <tbody>
                <tr v-for="item in result" :key="item._id">
                      <td>
                            <input type="checkbox" class="singleCheck">
                        </td>
                        <td>
                            <img class="goods-img" :src="item.pic" alt="">
                        </td>
                        <td>{{item.title}}</td>
                        <td class="single-price">{{item.price}}</td>
                        <td>
                            <span class="minus">-</span><span class="count">{{item.count}}</span><span class="addCount">+</span>
                        </td>
                        <td class="single-sum">{{item.price*item.count}}</td>
                        <td><button class="del">删除</button></td>
                    </tr>
              </tbody>
          </table>
      </div>
      
      <footer>
          <div>
              商品总共<span class="goodsCount"></span>件&#x3000; &#x3000;已选中商品 <span class="checkedCount"></span>件
          </div>
          <div>
              总价￥<span class="sumPrice"></span>元
          </div>
      </footer>
  </div>
</template>

<script>
import btn from '@/components/button'
export default {
  name: 'Home',
  components: {
    btn
  },
  data() {
    return {
      result: [{
            "_id": "59f087ef11945e2760c852dd",
            "title": "笔记本电脑",
            "cid": "59f1e1ada1da8b15d42234e9",
            "price": 2346,
            "old_price": "4000",
            "count": 1,
            "pic": "http://jd.itying.com/upload/Hfe1i8QDOkfVt-PuGcxCA0fs.jpg",
            "s_pic": "http://jd.itying.com/upload/Hfe1i8QDOkfVt-PuGcxCA0fs.jpg_200x200.jpg"
        },
        {
            "_id": "59f6a2d27ac40b223cfdcf81",
            "title": "乐扣乐扣(lock&lock)菲特旋转盖轻量杯",
            "cid": "59f1e1ada1da8b15d42234e9",
            "price": "2001",
            "old_price": "2001",
            "count": 1,
            "pic": "http://jd.itying.com/upload/iPrQ_-r43nGjFyxYXiMZWTM6.jpg",
            "s_pic": "http://jd.itying.com/upload/iPrQ_-r43nGjFyxYXiMZWTM6.jpg_200x200.jpg"
        },
        {
            "_id": "5a012cba64604635f4a2eae0",
            "title": "小米 红米5A 全网通版 2GB+16GB 香槟金",
            "cid": "59f1e1ada1da8b15d42234e9",
            "price": 599,
            "old_price": "599.00",
            "count": 1,
            "pic": "http://jd.itying.com/upload/NkuiIr9puaI7cSxZHfz8UYOT.jpg",
            "s_pic": "http://jd.itying.com/upload/NkuiIr9puaI7cSxZHfz8UYOT.jpg_200x200.jpg"
        },
        {
            "_id": "5a0425bc010e711234661439",
            "title": "磨砂牛皮男休闲鞋-有属性",
            "cid": "59f1e1e880e7ed050cec999d",
            "price": "688",
            "old_price": "368",
            "count": 1,
            "pic": "http://jd.itying.com/upload/RinsvExKu7Ed-ocs_7W1DxYO.png",
            "s_pic": "http://jd.itying.com/upload/RinsvExKu7Ed-ocs_7W1DxYO.png_200x200.png"
        },
        {
            "_id": "5a042682010e71123466143b",
            "title": "2V341DD7低靴皮带扣细跟中跟鞋",
            "cid": "59f1e1e880e7ed050cec999d",
            "price": 188,
            "old_price": "888",
            "count": 1,
            "pic": "http://jd.itying.com/upload/cPvPwUACxcco6PYXWwhSrkPN.png",
            "s_pic": "http://jd.itying.com/upload/cPvPwUACxcco6PYXWwhSrkPN.png_200x200.png"
        },
        {
            "_id": "5a042702010e71123466143c",
            "title": "茵曼2017冬装新款棒球罗纹领落肩袖丝绒保暖棉衣外套女",
            "cid": "5a0424b8010e711234661437",
            "price": 399,
            "count": 1,
            "old_price": "1199",
            "pic": "http://jd.itying.com/upload/cRiODeTtSNgcknvzi2rNLq4k.png",
            "s_pic": "http://jd.itying.com/upload/cRiODeTtSNgcknvzi2rNLq4k.png_200x200.png"
        }
    ]
    }
  },
  created() {
    
  }
}
</script>
<style scoped>
        .home{
          width: 1200px;
          margin: 0 auto;
        }
        header {
            width: 100%;
            height: 70px;
            background-color: #444444;
            padding-top: 22px;
            padding-left: 20px;
        }
        
        header button {
            border: none;
            padding: 5px 15px;
            background-color: #fff;
            color: orange;
            cursor: pointer;
        }
        
        table {
            width: 100%;
        }
        
        thead th {
            padding: 12px 0;
        }
        
        td {
            text-align: center;
            padding: 12px 0;
        }
        
        .goods-img {
            width: 100px;
            height: 100px;
        }
        
        .good-box {
            min-height: 800px;
            border: 1px solid #333;
        }
        
        span {
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #333;
            vertical-align: middle;
        }
        
        .minus,
        .add {
            cursor: pointer;
        }
        
        .del {
            cursor: pointer;
        }
        
        footer {
            display: flex;
            height: 80px;
            background-color: #555;
            justify-content: space-between;
            color: #fff;
            align-items: center;
            padding: 0 20px;
        }
        
        footer div {
            line-height: 80px;
        }
</style>
